<div class="page-header">
	<h1>
		Dropzone.js
		<small>
			<i class="ace-icon fa fa-angle-double-right"></i>
			Drag &amp; drop file upload with image preview
		</small>
	</h1>
</div>
<div>
	<input type="button" value="上传文件" id="hiwanFileUpload"/>
</div>




<script type="text/javascript">

	jQuery(function($){
	
		$("#hiwanFileUpload").hiwanFileUpload({
			     //busiId:'picture', //作为文件的挂靠业务id 必输
			     orgId:'${fns:getOrgId()}',
			     type:"file",
			     filters:"*",
			     max_file_size:50,//mb
			     uploadSuccess:function(file,msg,status){
			    	 alert("上传完成");
			     },
			     /* fileAdded:function(file){
			    	 alert("文件添加");
			     }, */
			     removedFile:function(msg){
			    	 alert("文件删除");
			     }
			     
			});
		
 		
		$('#hiwanFileUploadPage').dialog({
			hide:true,
			autoOpen:false,
			width: 850,
			height:700,
			modal:true,
			title: "管理",
			title_html: true,			
			buttons: [
				{
					id: "btnPModify",
					html: "<i class='ace-icon fa fa-pencil-square-o bigger-110'></i>&nbsp; 修改",
					"class" : "btn btn-primary btn-minier",
					click: function() {
						modify();
					}
				},
				{
					id: "btnPSave",
					html: "<i class='ace-icon fa fa-floppy-o bigger-110'></i>&nbsp; 保存",
					"class" : "btn btn-success btn-minier",
					click: function() {
						save();
					}
				},
				{
					id: "btnPCancle",
					html: "<i class='ace-icon fa fa-undo bigger-110'></i>&nbsp; 取消",
					"class" : "btn btn-warning btn-minier",
					click: function() {
						cancle();
					}
				},												
				{
					id: "btnPClose",
					html: "<i class='ace-icon fa fa-times bigger-110'></i>&nbsp; 关闭",
					"class" : "btn btn-minier",
					click: function() {
						$(this).dialog("close");
						$(this).empty();
					}
				}				
			]				
		});
	
		
		$("#hiwanFileUpload").on("click",function(){
			$("#hiwanFileUploadPage").load("${ctx}/demo/uploadPage.do");
			$("#hiwanFileUploadPage").dialog("open");
		}); 
		
		
		
		 $("#dropzone1").dropzone({
			url:"${ctx}/file/upload.do",
	        maxFiles: 10,//最大文件个数
	        maxFilesize: 512,//最大文件大小MB
	        //acceptedFiles: ".js,.obj,.dae"//可以上传的文件
	        paramName: "file",//后台文件类型接受的参数名称
	        params: {busiId:"",orgId:""},//后台可接受的参数
	        addRemoveLinks : true,
			dictDefaultMessage :
							'<span class="bigger-150 bolder"><i class="ace-icon fa fa-caret-right red"></i>点击或拖拽文件</span>  \
							<span class="smaller-80 grey"></span> <br /> \
							<i class="upload-icon ace-icon fa fa-cloud-upload blue fa-3x"></i>',
							
		  dictResponseError: '文件上传发生错误',
	      dictFallbackMessage: "浏览器不支持拖拽文件上传",
	      dictFallbackText: "Please use the fallback form below to upload your files like in the olden days.",
	      dictFileTooBig: "文件过大 ({{filesize}}MiB). 最大: {{maxFilesize}}MiB.",
	      dictInvalidFileType: "无法上传此类型的文件.",
	      dictResponseError: "服务器响应码： {{statusCode}}",
	      dictCancelUpload: "取消上传",
	      dictCancelUploadConfirmation: "是否确定取消此文件上传?",
	      dictRemoveFile: "移除文件",
	      dictRemoveFileConfirmation:"是否确定移除此文件",
	      dictMaxFilesExceeded: "无法上传文件",
	      //初始化监听事件（非重写默认方法）
	      init: function() {
	      		//新增文件
		        this.on("addedfile", function(file) {
		           
		        });
		        //文件上传成功
		        this.on("success", function(file,status) {
		           alert(file+"----"+status);
		        });
		        //删除文件
		        this.on("removedfile", function(file) {
		        	$.post("${ctx}/file/deleteFile.do",{applyArea:"",applyFile:file.name,fileType:1},function(result){
					    alert(result);
					});
		        });
		    }
	        
	    }); 
	    
	
	   Dropzone.autoDiscover = false;
	  var myDropzone = new Dropzone("#dropzone" , {
	    paramName: "file", // The name that will be used to transfer the file
	    maxFilesize: 0.5, // MB
	
		addRemoveLinks : true,
		dictDefaultMessage :
		'<span class="bigger-150 bolder"><i class="ace-icon fa fa-caret-right red"></i>点击或拖拽文件</span>  \
		<span class="smaller-80 grey"></span> <br /> \
		<i class="upload-icon ace-icon fa fa-cloud-upload blue fa-3x"></i>'
	,
		  dictResponseError: '文件上传发生错误',
	      dictFallbackMessage: "浏览器不支持拖拽文件上传",
	      dictFallbackText: "Please use the fallback form below to upload your files like in the olden days.",
	      dictFileTooBig: "文件过大 ({{filesize}}MiB). 最大: {{maxFilesize}}MiB.",
	      dictInvalidFileType: "无法上传此类型的文件.",
	      dictResponseError: "服务器响应码： {{statusCode}}",
	      dictCancelUpload: "取消上传",
	      dictCancelUploadConfirmation: "是否确定取消此文件上传?",
	      dictRemoveFile: "移除文件",
	      dictRemoveFileConfirmation:"是否确定移除此文件",
	      dictMaxFilesExceeded: "无法上传文件",
		 
		//change the previewTemplate to use Bootstrap progress bars
		previewTemplate: "<div class=\"dz-preview dz-file-preview\">\n  <div class=\"dz-details\">\n    <div class=\"dz-filename\"><span data-dz-name></span></div>\n    <div class=\"dz-size\" data-dz-size></div>\n    <img data-dz-thumbnail />\n  </div>\n  <div class=\"progress progress-small progress-striped active\"><div class=\"progress-bar progress-bar-success\" data-dz-uploadprogress></div></div>\n  <div class=\"dz-success-mark\"><span></span></div>\n  <div class=\"dz-error-mark\"><span></span></div>\n  <div class=\"dz-error-message\"><span data-dz-errormessage></span></div>\n</div>"
	  });
	  
	   $(document).one('ajaxloadstart.page', function(e) {
			try {
				myDropzone.destroy();
			} catch(e) {}
	   }); 
	
	
	});
</script>